<template>
  <div>
    <header class="header">
      <div class="title">
        <img src="@/assets/images/01_11.png" class="img_zuo" @click="clickBack" />
        <div>{{ community.name }}</div>
      </div>
    </header>
    <div class="menPhis-main">
      <div class="menPhis-main-footer">
        <div class="menPhis-box" v-for="(item, index) in ZGFList" :key="index" @click="clickAdd(item)">
          <div class="menPhis-box-header">
            <img
              :class="communityIdList.indexOf(item.id) !== -1 ? 'active' : ''"
              src="@/assets/images/zgffw.png"
              class="menPhis-img">
          </div>
          <div class="menPhis-box-text">{{ item.mc }}</div>
        </div>
      </div>
    </div>
    <div class="button-box">
      <div class="button" @click="submit">确认</div>
    </div>
  </div>
</template>
<script>
  import terminal from '@/assets/js/terminal';
  import { Toast } from 'vant';
  export default {
    data () {
      return {
        userId: 0,
        name: '',
        community: {},
        ZGFList: [],
        communityIdList: [],
        communityNameList: []
      };
    },
    mounted () {
      this.userId = Number(localStorage.getItem('userId'));
      this.community = this.$route.query;
      this.inQuire();
    },
    methods: {
      //  选择
      clickAdd (data) {
        let List = this.communityIdList;
        if (List.indexOf(data.id) === -1) {
          List.push(data.id);
          this.communityNameList.push(data.mc);
        } else {
          List.splice(List.indexOf(data.id));
          this.communityNameList.splice(this.communityNameList.indexOf(data.mc, 1));
        }
      },
      //  提交
      submit () {
        let a = {
          name: this.community.name,
          nameId: this.community.id,
          communityIdList: this.communityIdList,
          communityNameList: this.communityNameList
        };
        localStorage.setItem('communityData', JSON.stringify(a));
        this.$router.go(-2);
      },
      //  查询
      inQuire () {
        let that = this;
        let params = { userId: that.userId, xqId: that.community.id };
        that.axios.get(`${that.$global_msg.Url.host}/partroInspection/selectZgfByUserId`, { params })
          .then(res => {
            if (res.data.code === 200) {
              that.ZGFList = res.data.rows.list;
              that.name = res.data.rows.name;
            } else {
              Toast(res.data.msg || '获取数据失败,请刷新页面重试')
            }
          }).catch( e => terminal._error(e));
      },
      //  返回
      clickBack () {
        this.$router.back();
      },
    }
  }
</script>

<style scoped>
  * {
    box-sizing: border-box;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }
  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
  }
  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }
  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .menPhis-main {
    min-height: 100vh;
    padding-top: 1.8519rem;
  }
</style>
<style scoped>
  .menPhis-main .menPhis-main-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 1.5rem;
  }
  .menPhis-main .menPhis-main-footer .menPhis-box {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    align-self: baseline;
  }
  .menPhis-main .menPhis-main-footer .menPhis-box .menPhis-box-header {
    padding: 0.4rem 0.5rem;
  }
  .menPhis-main .menPhis-main-footer .menPhis-box .menPhis-box-header .menPhis-img {
    width: 100%;
    height: auto;
    filter: grayscale(100%);
  }
  .menPhis-main .menPhis-main-footer .menPhis-box .menPhis-box-text {
    padding: 0 0.15rem;
    font-size: 0.35rem;
    text-align: center;
  }
  .button-box {
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: 20px;
    background-color: white;
    width: 100%;
  }
  .button-box .button {
    width: 100%;
    height: 1rem;
    color: white;
    text-align: center;
    line-height: 1rem;
    background-color: #2B6CFE;
    border-radius: 0.105185rem;
  }
  .menPhis-main .menPhis-main-footer .menPhis-box .menPhis-box-header .active {
    filter: grayscale(0%);
  }
</style>
